import React, { Component } from 'react';
import { StyleSheet, View, Text, ScrollView } from 'react-native';
import { SafeAreaView } from 'react-navigation';

import BaseStyle from '../constants/Style';

export default class Icon extends Component {
  constructor(props) {
    super(props);
    this.state = {
      iconArray: [
        {
          icon: '\ue629',
          iconText: '&#xe629;',
          icon2: '\ue612',
          iconText2: '&#xe612;',
          icon3: '\ue619',
          iconText3: '&#xe619;',
          icon4: '\ue615',
          iconText4: '&#xe615;',
        },
        {
          icon: '\ue605',
          iconText: '&#xe605;',
          icon2: '\ue601',
          iconText2: '&#xe601;',
          icon3: '\ue60d',
          iconText3: '&#xe60d;',
          icon4: '\ue7de',
          iconText4: '&#xe7de;',
        },
        {
          icon: '\ue674',
          iconText: '&#xe674;',
          icon2: '\ue656',
          iconText2: '&#xe656;',
          icon3: '\ue626',
          iconText3: '&#xe626;',
          icon4: '\ue624',
          iconText4: '&#xe624;',
        },
        {
          icon: '\ue61e',
          iconText: '&#xe61e;',
          icon2: '\ue61d',
          iconText2: '&#xe61d;',
          icon3: '\ue618',
          iconText3: '&#xe618;',
          icon4: '\ue655',
          iconText4: '&#xe655;',
        },
        {
          icon: '\ue625',
          iconText: '&#xe625;',
          icon2: '\ue623',
          iconText2: '&#xe623;',
          icon3: '\ue620',
          iconText3: '&#xe620;',
          icon4: '\ue672',
          iconText4: '&#xe672;',
        },
        {
          icon: '\ue602',
          iconText: '&#xe602;',
          icon2: '\ue640',
          iconText2: '&#xe640;',
          icon3: '\ue613',
          iconText3: '&#xe613;',
          icon4: '\ue614',
          iconText4: '&#xe614;',
        },
        {
          icon: '\ue627',
          iconText: '&#xe627;',
          icon2: '\ue663',
          iconText2: '&#xe663;',
          icon3: '\ue62c',
          iconText3: '&#xe62c;',
          icon4: '\ue621',
          iconText4: '&#xe621;',
        },
        {
          icon: '\ue6a2',
          iconText: '&#xe6a2;',
          icon2: '\ue647',
          iconText2: '&#xe647;',
          icon3: '\ue611',
          iconText3: '&#xe611;',
          icon4: '\ue68c',
          iconText4: '&#xe68c;',
        },
        {
          icon: '\ue61b',
          iconText: '&#xe61b;',
          icon2: '\ue616',
          iconText2: '&#xe616;',
        },
      ],
    };
  }

  render() {
    return (
      <SafeAreaView
        style={[BaseStyle.flex, styles.homebg]}
        forceInset={{ top: 'never' }}>
        <ScrollView>
          <View style={styles.container}>
            {this.state.iconArray.map(k => {
              return (
                <View style={styles.row} key={k.icon + '_'}>
                  <View style={styles.items}>
                    <Text style={styles.icont}>{k.icon}</Text>
                    <Text style={styles.font}>{k.iconText}</Text>
                  </View>
                  <View style={styles.items}>
                    <Text style={styles.icont}>{k.icon2}</Text>
                    <Text style={styles.font}>{k.iconText2}</Text>
                  </View>
                  <View style={styles.items}>
                    <Text style={styles.icont}>{k.icon3}</Text>
                    <Text style={styles.font}>{k.iconText3}</Text>
                  </View>
                  <View style={styles.items}>
                    <Text style={styles.icont}>{k.icon4}</Text>
                    <Text style={styles.font}>{k.iconText4}</Text>
                  </View>
                </View>
              );
            })}
          </View>
        </ScrollView>
      </SafeAreaView>
    );
  }
}

const styles = StyleSheet.create({
  homebg: {
    backgroundColor: '#fff',
  },
  container: {
    ...BaseStyle.flex,
    marginBottom: 40,
  },
  row: {
    ...BaseStyle.row,
    ...BaseStyle.justifyContentBetween,
    ...BaseStyle.paddingHorizontal,
    marginTop: 20,
  },
  items: {
    ...BaseStyle.justifyContentCenter,
    ...BaseStyle.alignItemsCenter,
  },
  icont: {
    fontFamily: 'iconfont',
    fontSize: 30,
  },
  font: {
    fontSize: 14,
  },
});
